<template>
	<view class="page_wrapper">
		<view class="audit_items flexRow">
			<view class="audit_item audited_item">
				<view class="audit_title">已完成任务</view>
				<view class="audit_num">{{taskcount.auditNumber || 0}} <text style="font-size:26rpx;">个</text></view>
			</view>
			<view class="audit_item">
				<view class="audit_title">已审核积分</view>
				<view class="audit_num">{{taskcount.auditIntegral || 0}}<text style="font-size:26rpx;">分</text></view>
			</view>
			<view class="audit_item">
				<view class="audit_title">待审核积分</view>
				<view class="audit_num">{{taskcount.stayIntegral || 0}}<text style="font-size:26rpx;">分</text></view>
			</view>
		</view>
		<view class="task_types">
			<view class="task_label flexRow">
				<image src="/static/img/task_lable.png"></image>
				<view>任务分类</view>
			</view>
			<view class="task_type_box flexRow">
				<view class="task_type_item" :class="{check_task_type: item.checked}" v-for="(item,key) in currentTaskType" :key="key" @tap="checkTypeHandle(key)">{{item.label}}</view>
			</view>
		</view>
		<view class="get_task">
			<view class="get_task_btn" @tap="toSubmitTask">
				领取任务
			</view>
		</view>
		<view class="task_record">
			<disable-click>
				<uni-collapse>
					<uni-collapse-item title="任务记录" thumb="/static/img/record_icon.png" @click.native="toTaskRecord" :arrowdown="false"  :bordeBottom='true'>
					</uni-collapse-item>
				</uni-collapse>
			</disable-click>
		</view>
		<view class="douyin_box">
			<uni-collapse>
			<!-- 	<uni-collapse-item title="任务记录" thumb="/static/img/record_icon.png" :arrowdown="false" @click.native="toTaskRecord" :bordeBottom='true'>
				</uni-collapse-item> -->
				<uni-collapse-item title="查看我的任务账号" :thumb="currentTask.icon_http_url" :rightText="taskcount.urls?'更换':'绑定'" :bordeBottom='true'>
					<textarea v-model="taskcount.urls" placeholder-class="pla_class" class="douyin_input" value="" placeholder="请复制您的任务账号或视频分享链接粘贴到此处。比如：#在抖音，记录美好生活# http://xxxxx/xxxx/xxx/51156=? " />
					<disable-click>
						<view class="douyin_btns flexRow">
							<view class="douyin_btn_course" @tap="toggleAccount">切换任务账号</view>
							<view class="bind_douyin_btn" @tap="douId">提交</view>
						</view>
					</disable-click>
				</uni-collapse-item>
			</uni-collapse>
		</view>
		<view class="bottom_wrapper">
			<view class="task_label flexRow">
				<image src="/static/img/task_lable.png"></image>
				<view>赚钱秘籍</view>
			</view>
			<view class="course_box">
				<view class="scroll_viewA flexRow">
					<view class="">
						<view class="scroll_view_title">
							教程视频
						</view>
						<view class="scroll_view_more">
							观看教程了解更多
						</view>
					</view>
					<navigator class="scroll_view_btn blue_btn" url="/pages/coursePage/coursePage">立即观看</navigator>
					<!-- <view class="scroll_view_btn blue_btn" @tap="checkCourse">立即观看</view> -->
				</view>
			</view>
			
			<!-- <scroll-view class="scroll_H" scroll-x="true" style="width: 100%">
				
				<view class="scroll_viewB">
					<view class="scroll_view_title">
						教程视频
					</view>
					<view class="scroll_view_more">
						观看教程了解更多
					</view>
					<view class="scroll_view_btn red_btn">
						立即观看
					</view>
				</view>
			</scroll-view> -->
		</view>
	</view>
</template>

<script>
	import request from "../../apiRequest/request.js"
	import utils from '../../utils/utils.js'
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	
	export default {
		components: {uniCollapse,uniCollapseItem},
		data() {
			return {
				taskcount: {},
				currentTask: {},
				currentTaskType: [],
				taskID: ''
			}
		},
		onLoad(option) {
			this.taskID = option.taskID
			let list = [], currentTask = uni.getStorageSync("currentTask");
			let currentTaskType = currentTask.task_type
			uni.setNavigationBarTitle({
			    title: currentTask.task_name
			})
			for(let i=0;i<currentTaskType.length;i++){
				list.push({
					label: currentTaskType[i],
					checked: false
				})
			}
			this.currentTask = currentTask
			this.currentTaskType = list
			
		},
		onShow() {
			this.getTaskCount()
		},
		methods: {
			checkTypeHandle(key){
				this.currentTaskType[key].checked = !this.currentTaskType[key].checked
			},
			checkCourse(){
				console.log('qq号码','mqqapi://card/show_pslcard?src_type=internal&version=1&uin=1131434')
				plus.runtime.openURL('mqqapi://card/show_pslcard?src_type=internal&version=1&uin=1131434', function(res) {
					console.log(res)
					if(res){
						uni.showToast({
						    title: res.message,
							icon: 'none',
						    duration: 2000
						})
					}
				})
				// uni.navigateTo({
				// 	url: "/pages/coursePage/coursePage"
				// })
			},
			toggleAccount(){
				uni.navigateTo({
					url: "/pages/taskTypeAccount/taskTypeAccount?taskID=" + this.taskID
				})
			},
			getTaskCount(){
				request.taskCount(this.taskID).then(res=>{
					console.log("taskCount:",res)
					this.taskcount = res.data
					// this.dou_url = this.taskcount.dou_url
					// uni.setStorageSync('taskTeaching', res.data.teaching);
				}).catch(err=>{
					this.$unexpected(err)
				})
			},
			toTaskRecord(){
				uni.navigateTo({
					url: "/pages/taskRecord/taskRecord"
				})
			},
			toSubmitTask:utils.throttle(function (item) {
				let type = '';
				for(let i=0;i<this.currentTaskType.length;i++){
					if(this.currentTaskType[i].checked){
						type+=this.currentTaskType[i].label + ','
					}
				}
				console.log('getTask...........')
				request.getTask(this.taskID,type.slice(0,-1)).then(res=>{
					console.log('getTask end...........',res)
					uni.setStorageSync('taskObject', res.data)
					uni.navigateTo({
						url: "/pages/submitTask/submitTask?taskID=" + this.taskID + "&type="+type.slice(0,-1)
					})
				}).catch(err=>{
					console.log(err)
					this.$unexpected(err)
				})
			}, 2000),
			douId(){
				request.bindTaskid(this.taskID,this.taskcount.urls).then(res=>{
					uni.showToast({
					    title: '提交成功',
						icon: 'none',
					    duration: 2000
					})
				}).catch(err=>{
					this.$unexpected(err)
				})
			}
		}
	}
</script>

<style>
.page_wrapper{
	background:rgba(248,248,248,1);
}
.audit_items{
	padding: 20rpx 20rpx 0 20rpx;
	justify-content: space-between;
	background-color: #FFFFFF;
}
.audit_item{
	width:223rpx;
	height:180rpx;
	box-shadow:0 4rpx 20rpx 0 rgba(172,172,172,0.3);
	border-radius:10rpx;
	padding-left: 20rpx;
	padding-top: 40rpx;
	box-sizing: border-box;
}
.audited_item{
	background:linear-gradient(-30deg,rgba(4,137,255,1),rgba(145,202,255,1));
	box-shadow:0 4rpx 34rpx 0 rgba(4,137,255,0.5);
	color:rgba(255,255,255,1);
}
.audit_title{
	font-size:30rpx;
	line-height: 30rpx;
	font-family:Source Han Sans SC;
	font-weight:bold;
	margin-bottom: 36rpx;
}
.audit_item>.audit_num{
	font-size:38rpx;
	font-family:Source Han Sans SC;
	font-weight:800;
	color:rgba(202,202,202,1);
}
.audited_item>.audit_num{
	font-size:38rpx;
	font-family:Source Han Sans SC;
	font-weight:800;
	color:rgba(255,255,255,1);
}
.get_task{
	padding-top: 20rpx;
	padding-bottom: 40rpx;
	background-color: #FFFFFF;
}
.get_task_btn{
	margin: 0 auto;
	border-radius: 6rpx;
	width: 380rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-size:38rpx;
	color: #FFFFFF;
	text-align: center;
	background:linear-gradient(0deg,rgba(254,175,10,1),rgba(253,217,118,1));
}
.bottom_wrapper{
	background-color: #FFFFFF;
	margin-top: 20rpx;
}
.task_label{
	padding-left: 20rpx;
}
.douyin_box{
	padding: 0 20rpx;
	background:rgba(255,255,255,1);
	/* padding-bottom: 30rpx; */
}
.douyin_input{
	display: block;
	background:rgba(238,246,255,1);
	border-radius:10rpx;
	padding: 12rpx 40rpx;
	width: 100%;
	height: 180rpx;
	font-size:28rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(4,137,255,1);
	line-height:40rpx;
	box-sizing: border-box;
}
.pla_class{
	color:rgba(4,137,255,1);
}
.uni-collapse-cell__title-text{
	font-size:34rpx !important;
	font-family:Source Han Sans SC;
	font-weight:400 !important;
	color:rgba(51,51,51,1) !important;
}
.uni-collapse-cell__wrapper{
	padding: 0 !important;
}
.uni-collapse-cell__title{
	padding: 0 !important;
}
.douyin_btns{
	justify-content: flex-end;
	margin-top: 20rpx;
	padding-bottom: 20rpx;
}
.douyin_btn_course{
	width:200rpx;
	height:60rpx;
	line-height: 60rpx;
	text-align: center;
	background:rgba(255,70,70,1);
	border-radius:10rpx;
	font-size:28rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(255,255,255,1);
	text-align: center;
}
.bind_douyin_btn{	
	width:180rpx;
	height:60rpx;
	line-height: 60rpx;
	background:rgba(4,137,255,1);
	border-radius:10rpx;
	text-align: center;
	font-size:28rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(255,255,255,1);
	margin-left: 40rpx;
}
.scroll_H{
	height:300rpx;
	width: 100%;
	white-space: nowrap;
}
.course_box{
	padding: 20rpx;
}
.scroll_viewA,.scroll_viewB{
	/* width:400rpx; */
	/* height:300rpx; */
	box-shadow:0 4rpx 20rpx 0 rgba(45,29,208,0.4);
	border-radius:10rpx;
	box-sizing: border-box;
	padding: 60rpx 20rpx;
	/* margin-left: 20rpx; */
	/* display: inline-block; */
	/* vertical-align: top; */
	/* padding-top: 74rpx; */
}
.scroll_viewA{
	background:linear-gradient(35deg,rgba(45,29,208,1),rgba(124,112,255,1));
	justify-content: space-between;
	align-items: center;
}
.scroll_viewB{
	background:linear-gradient(35deg,rgba(176,10,149,1),rgba(239,61,189,1));
}
.scroll_view_title{
	font-size:38rpx;
	font-family:Source Han Sans SC;
	font-weight:bold;
	color:rgba(255,255,255,1);
	line-height:38rpx;
}
.scroll_view_more{
	font-size:26rpx;
	font-family:Source Han Sans SC;
	font-weight:400;
	color:rgba(255,255,255,1);
	line-height:26rpx;
	margin-top: 10rpx;
}
.scroll_view_btn{
	width:180rpx;
	height:50rpx;
	line-height: 50rpx;
	text-align: center;
	background:rgba(253,202,32,1);
	border-radius:25rpx;
	font-size:26rpx;
	font-family:Source Han Sans SC;
	font-weight:bold;
	/* margin-top: 30rpx; */
}
.blue_btn{
	color:rgba(45,29,208,1);
}
.red_btn{
	color:rgba(176,10,149,1);
}
.task_record{
	padding: 0 20rpx;
	margin: 30rpx 0;
	background-color: #fff;
}
.task_types{
	background-color: #fff;
}
.task_type_box{
	padding: 0 20rpx;
	box-sizing: border-box;
	flex-wrap: wrap;
	justify-content: space-between;
}
.task_type_item{
	width:226rpx;
	height:80rpx;
	line-height: 80rpx;
	background:rgba(238,238,238,1);
	border-radius:10rpx;
	font-size:34rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(67,67,67,1);
	text-align: center;
	margin-bottom: 20rpx;
}
.check_task_type{
	background:rgba(4,137,255,1);
	color:rgba(255,255,255,1);
}
</style>
